<template>
	<view class="cc-date-time-picker" :style="{
		'--light-color': $theme.lightColor,
		'--primary': $theme.primary
	}">
		<view class="mm-picker__content" @click="handleOpen">
			<slot>
				<view :class="['mm-picker__text', disabled ? 'mm-picker__placeholder' : '']" v-if="value">{{value}}</view>
				<view class="mm-picker__placeholder" v-else>{{placeholder}}</view>
				<!-- #ifdef APP-PLUS -->
				<w-icon top="-4" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<w-icon top="8" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<w-icon top="0" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
				<!-- #endif -->
			</slot>
		</view>
		<w-popup 
			v-model="show" 
			mode="center"
			border-radius="14"
			:mask-close-able="!confirmBtn"
		>
			<view class="cc-date-time-picker__title">
				{{tipShow ? '可选范围' : placeholder}}
			</view>
			<view class="picker__tip" v-show="tipShow">
				{{minDate}} ~ {{maxDateDefault}}
			</view>
			<view class="picker__date-time">
				<picker @change="dateChange" :value="date" mode="date" :start="startDate" :end="endDate">
					<view class="picker__date-time__text" style="width: 300rpx; margin-right: 24rpx;">
						<!-- <w-icon name="calendar" color="#fff"></w-icon> -->
						<text>{{date || '-- -- --'}}</text>
					</view>
				</picker>
				<picker @change="timeChange" :value="time" mode="time">
					<view class="picker__date-time__text" style="width: 170rpx;">
						<!-- <w-icon name="calendar" color="#fff"></w-icon> -->
						<text>{{time || '-- --'}}</text>
					</view>
				</picker>
			</view>
			<button v-if="confirmBtn" type="default" @click="handleConfirm">{{ confirmBtn }}</button>
		</w-popup>
	</view>
</template>

<script>
	/**
	 * 日期时间picker双向绑定封装
	 */
	import Emitter from '../../libs/util/emitter.js';
	export default {
		mixins: [Emitter],
		props: {
			// v-model  YYYY-MM-DD HH:mm
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请选择日期时间'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 最小可选日期
			minDate: {
				type: String,
				default: '1950-01-01 00:00'
			},
			/**
			 * 最大可选日期
			 * 默认最大值为今天
			 * */
			maxDate: {
				type: String,
				default: ''
			},
			// 确认按钮内容，无内容时则没有按钮
			confirmBtn: {
				type: String,
				default: ''
			}
		},
		computed: {
			// 日期范围限制
			startDate() {
				return this.minDate.match(/\d{4}-\d{2}-\d{2}/)[0];
			},
			endDate() {
				return this.maxDateDefault.match(/\d{4}-\d{2}-\d{2}/)[0];
			},
			maxDateDefault() {
				return this.maxDate || this.$w.dayjs().format('YYYY-MM-DD HH:mm')
			}
		},
		watch: {
			show: {
				handler(newValue) {
					if (newValue && this.value) {
						this.date = this.value.match(/\d{4}-\d{2}-\d{2}/)[0];
						this.time = this.value.match(/\d{2}:\d{2}/)[0];
					} else if (newValue && !this.value) {
						this.date = 0;
						this.time = 0;
					}
				}
			}
		},
		data() {
			return {
				show: false,
				date: 0,
				time: 0,
				tipShow: false
			}
		},
		methods: {
			// 开启弹窗
			handleOpen() {
				if (this.disabled) return;
				this.tipShow = false;
				this.show = true;
			},
			// 日期改变
			dateChange(e) {
				this.date = e.detail.value;
				this.time = 0; // 还原时间
			},
			// 时间改变
			timeChange(e) {
				let time = e.detail.value;
				if (this.date) {
					let currentTime = this.$w.dayjs(`${this.date} ${time}`).valueOf();
					let startTime = this.$w.dayjs(this.minDate).valueOf();
					let endTime = this.$w.dayjs(this.maxDate).valueOf();
					if (currentTime < startTime || currentTime > endTime) {
						this.tipShow = true;
						return;
					}
				}
				this.time = time;
				if (this.date && !this.confirmBtn) { // 如果已经选择了日期，并且没有确认按钮
					this.close(`${this.date} ${this.time}`);
				}
			},
			close(value) {
				this.$emit('input', value);
				this.$emit('change', value);
				this.$nextTick(() => {
					this.dispatch('w-form-item', 'on-form-change', value);
				});
				this.show = false;
			},
			// 点击确认
			handleConfirm() {
				if (!this.date) {
					uni.showToast({
						title: '请选择日期',
						icon: 'none'
					})
				} else if (!this.time) {
					uni.showToast({
						title: '请选择时间',
						icon: 'none'
					})
				} else {
					this.close(`${this.date} ${this.time}`);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cc-date-time-picker {
		width: 100%;
		.mm-picker__content {
			text-align: right;
			display: flex;
			.mm-picker__placeholder {
				color: var(--light-color);
				flex: 1;
			}
			.mm-picker__text {
				flex: 1;
			}
		}
		&__title {
			font-size: 30rpx;
			text-align: center;
			padding: 20rpx 0 10rpx;
		}
		.picker__date-time {
			padding: 30rpx 30rpx 40rpx;
			display: flex;
			.picker__date-time__text {
				height: 60rpx;
				line-height: 60rpx;
				background-color: var(--primary);
				color: #fff;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				border-radius: 10rpx;
				// text {
				// 	margin-left: 20rpx;
				// }
			}
		}
		.picker__tip {
			color: var(--light-color);
			font-size: 26rpx;
			text-align: center;
			line-height: 1;
		}
	}
</style>
